<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       {{msg}}
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>

         // create  创建  准备数据（数据劫持，生成getter和setter）   只经历一次
        // mount   挂载  根据数据，对模板进行解析，解析成html结构 挂载到页面  只经历一次
        // update  更新  数据变动 引发页面的重新渲染   可经历多次
        // destroy 销毁   vm实例被被销毁，data会被清除，绑定事件也会被解绑  只经历一次


        // 生命周期的钩子函数  会在各个生命周期阶段执行的函数

        // create  创建  beforeCreate   created
        // mount   挂载  beforeMount mounted
        // update  更新  beforeUpdate  updated
        // destroy 销毁   beforeDestroy destroyed
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello vue"
            },
            beforeCreate(){
                console.log("创建前");
            },
            created(){
                console.log("创建结束");
                // 可以通过this调用实际的数据，使用最多
                console.log(this.msg);
            },
            beforeMount(){
                console.log("挂载前");
                // 获取根节点的dom结构,还不能获取真正的数据
                console.log(this.$el);
            },
            mounted(){
                console.log("挂载完成");
                // 获取根节点的dom结构，使用最多
                console.log(this.$el);
            },
            beforeUpdate(){
                console.log("更新前");
            },
            updated(){
                console.log("更新结束");
            },
            beforeDestroy(){
                console.log("销毁前");
            },
            destroyed(){
                console.log("销毁结束");
            }
        })

        // 销毁vm实例
        // vm.$destroy();
    </script>
</body>
</html>